import React from "react";
import {FuncGroupsMoreProps, FuncGroupsProps, FuncProps, IExtraData, isFuncGroupsMoreProps} from "./constants";
import {Button, Dropdown, Menu, Modal} from "antd";
import _ from "lodash";
import A from "../A";
import "./index.scss";
import SubMenu from "antd/lib/menu/SubMenu";
import {checkPermission} from "@/common/withPermission";

interface btsCom {
  props: FuncGroupsProps;
  btn: FuncProps;
}

function itemClick(btn: FuncProps, extra?: IExtraData) {
  const {confirmTitle, confirmMsg, onClick} = btn;
  if (!onClick) {
    return;
  }
  if (confirmMsg) {
    Modal.confirm({
      title: confirmTitle,
      content: confirmMsg,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        onClick(btn.para, extra?.code);
      }
    });
  } else {
    onClick(btn.para, extra?.code);
  }
}

export class RenderBtns extends React.Component<btsCom, { flg: any }> {

  constructor(props: { props: FuncGroupsProps; btn: FuncProps }) {
    super(props);
    this.state = {
      flg: this.props.btn.dropdownVisible
    };
  }

  shouldComponentUpdate(nextProps: btsCom) {
    if (nextProps.btn.dropdownVisible !== this.props.btn.dropdownVisible) {
      this.setState({
        flg: nextProps.btn.dropdownVisible
      });
    }
    return true;
  }

  render() {
    const {props, btn} = this.props;
    if (btn.type === "customize") {
      return;
    }

    let disabled = btn.disabled;
    if (!checkPermission(btn.permissionCode)) {
      if (btn.useHidden) {
        return;
      } else {
        disabled = true;
      }
    }

    if (btn.isPadding) {
      return <span key={btn.key}/>;
    }

    const extraDatas = btn.extraDatas;
    if (extraDatas && !_.isEmpty(extraDatas)) {
      const renderContent = () => {
        const menuItems = extraDatas.map(extra => {
          const onClick = () => {
            itemClick(btn, extra);
          };
          return (
            <Menu.Item
              onClick={onClick}
              disabled={extra.disabled}
              key={extra.code}
            >
              {extra.name}
            </Menu.Item>
          );
        });
        return <Menu>{menuItems}</Menu>;
      };

      return this.state.flg !== undefined ? (
        <Dropdown
          key={btn.key}
          overlay={renderContent()}
          disabled={disabled}
          placement={props.placement}
          overlayClassName="funcBtnGroupOverlay"
          trigger={["click"]}
          visible={this.state.flg}
          onVisibleChange={visible => {
            this.props.btn.shortcut && this.props.btn.shortcut(visible);
            this.setState({
              flg: !this.state.flg
            });
          }}
        >
          {props.htmlType === "button" ? (
            <Button icon={btn.icon} type={btn.type}>
              {btn.text}
            </Button>
          ) : (
            <A>{btn.text}</A>
          )}
        </Dropdown>
      ) : (
        <Dropdown
          key={btn.key}
          overlay={renderContent()}
          disabled={disabled}
          placement={props.placement}
          overlayClassName="funcBtnGroupOverlay"
          trigger={["click"]}
        >
          {props.htmlType === "button" ? (
            <Button icon={btn.icon} type={btn.type}>
              {btn.text}
            </Button>
          ) : (
            <A>{btn.text}</A>
          )}
        </Dropdown>
      );
    } else {
      const onClick = () => {
        itemClick(btn);
      };

      if (props.htmlType === "button") {
        return (
          <Button
            icon={btn.icon}
            disabled={disabled}
            type={btn.type}
            key={btn.key}
            title={btn.title}
            onClick={onClick}
          >
            {btn.text}
          </Button>
        );
      } else {
        return (
          <A disabled={disabled} key={btn.key} onClick={onClick}>
            {btn.text}
          </A>
        );
      }
    }
  }
}

function renderMore(props: FuncGroupsProps, more: FuncGroupsMoreProps) {
  if (!more || more.type === "customize" || _.isEmpty(more)) {
    return;
  }

  const renderContent = () => {
    const menuItems = more.btns.map(btn => {
      let disabled = btn.disabled;
      if (!checkPermission(btn.permissionCode)) {
        if (btn.useHidden) {
          return;
        } else {
          disabled = true;
        }
      }

      if (btn.extraDatas && !_.isEmpty(btn.extraDatas)) {
        return (
          <SubMenu disabled={disabled} key={btn.key}>
            {btn.extraDatas.map(extra => {
              const onClick = () => {
                itemClick(btn, extra);
              };
              return (
                <Menu.Item
                  key={extra.code}
                  disabled={extra.disabled}
                  onClick={onClick}
                >
                  {extra.name}
                </Menu.Item>
              );
            })}
          </SubMenu>
        );
      } else {
        const onClick = () => {
          itemClick(btn);
        };
        return (
          <Menu.Item onClick={onClick} disabled={disabled} key={btn.key}>
            {btn.text}
          </Menu.Item>
        );
      }
    });
    return <Menu>{menuItems}</Menu>;
  };

  return (
    <Dropdown
      key={more.key}
      disabled={more.disabled}
      placement={props.placement}
      overlay={renderContent()}
      overlayClassName="funcBtnGroupOverlay"
      trigger={["click"]}
    >
      {props.htmlType === "button" ? (
        <Button
          disabled={more.disabled}
          title={more.title}
          icon={more.icon}
          type={more.type}
        >
          {more.text}
        </Button>
      ) : (
        <A disabled={more.disabled} title={more.title}>
          {more.text}
        </A>
      )}
    </Dropdown>
  );
}

const renderCustomize = (props: FuncGroupsProps, btn: FuncProps) => {
  return <span key={btn.key}>{btn.text}</span>;
};

const FuncBtnGroup = (props: FuncGroupsProps) => {
  const result: JSX.Element[] = [];
  props.btns.forEach((btn, i) => {
    let ele: JSX.Element | undefined;
    if (isFuncGroupsMoreProps(btn)) {
      ele = renderMore(props, btn);
    } else if (btn.type === "customize") {
      ele = renderCustomize(props, btn);
    } else {
      ele = <RenderBtns props={props} btn={btn} key={btn.key + i}/>;
    }
    if (ele) {
      result.push(ele);
    }
  });
  return result;
};

export default FuncBtnGroup;
